<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('折线图')}`">{{ $t('折线图') }}</t>
            <li>
                请注意：在使用<span class="s-code">sib-charts</span>之前请确保本地项目中安装了<span class="d-code">echarts</span>依赖，
                推荐版本：<span class="s-code">5.4.2</span>
            </li>
            <li>
                本示例配置来源：
                <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple" target="_blank">Echarts基础折线图</a>
            </li>
        </template>
        <sib-charts :options="options"></sib-charts>
    </example>
</template>

<script>

export default {
    setup() {
        return {
            options: {
                grid: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line',
                    },
                ],
            },
            templateString: `<template>
    <div class="example-box">
        <sib-charts :options="options"></sib-charts>
    </div>
</template>

<script>
export default {
    setup() {
        return {
            options: {
                grid: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line',
                    },
                ],
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
